<!-- 页面 -->
<template>
    <div class="fen">
        <input type="text" placeholder="回车搜索商品">
        <div class="fen1">
            <div class="fen11">
                <ul>
                    <li >所有分类</li>
                    <li>居家</li>
                    <li>配件装饰</li>
                    <li>服装</li>
                    <li>家电</li>
                </ul>
            </div>
            <div class="fen12">
                <lun></lun>
                <div>
                    <img class="img" src="https://img14.360buyimg.com/img/s100x100_jfs/t1099/252/780759846/209291/58e7af4d/5547408cNf879d9ca.jpg!cc_100x100.webp alt=">
                    <img class="img" src="https://img14.360buyimg.com/img/s100x100_jfs/t1099/252/780759846/209291/58e7af4d/5547408cNf879d9ca.jpg!cc_100x100.webp alt=">
                    <img class="img" src="https://img14.360buyimg.com/img/s100x100_jfs/t1099/252/780759846/209291/58e7af4d/5547408cNf879d9ca.jpg!cc_100x100.webp alt=">
                    <img class="img" src="https://img14.360buyimg.com/img/s100x100_jfs/t1099/252/780759846/209291/58e7af4d/5547408cNf879d9ca.jpg!cc_100x100.webp alt=">
                    <img class="img" src="https://img14.360buyimg.com/img/s100x100_jfs/t1099/252/780759846/209291/58e7af4d/5547408cNf879d9ca.jpg!cc_100x100.webp alt=">
                    <img class="img" src="https://img14.360buyimg.com/img/s100x100_jfs/t1099/252/780759846/209291/58e7af4d/5547408cNf879d9ca.jpg!cc_100x100.webp alt=">
                </div>
            </div>
        </div>
        <dic class="dd" :index="index"></dic>
    </div>
</template>
<!-- vue -->
<script>
import dic from '../components/div.vue';
import lun from '@/components/lunbo.vue';
export default {
    components: {
        dic,
        lun,
    },
    data() {
        return {
            // 声明的属性
            index: 1,
        }
    },
    //生命周期函数
    mounted() {
    },
    // 调用方法
    methods: {
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.fen {
    width: 100%;
    height: 100%;
}

.fen input {
    width: 16.25rem;
    height: 2.125rem;
    border: 0rem;
    background: #f5f5f5;
    margin-top: .625rem;
    margin-left: 1rem;
}

.fen .fen1 {
    width: 100%;
    height: 90%;
    margin-left: .625rem;
}

.fen .fen1 .fen11 {
    width: 20%;
    height: 50rem;
    float: left;
}
.fen .fen1 .fen12 {
    width: 75%;
    height: 50rem;
    /* background: red; */
    float: left;
}
.fen12 .img{
    width: 33%;
    float: left;
}

.fen .fen1 .fen11 ul li {
    width: 100%;
    height: 3.125rem;
    text-align: center;
    line-height: 3.125rem;
}
</style>